import React from 'react'
import { Button } from 'antd';
import {useEffect,useState} from "react"
import Header from "../components/Header"
import Content from "../components/Content"
import Myclass from './myclass';
import Appson from './Appson';
import axios from 'axios'; // ajax 是 xmlhttprequest  axios是ajax封装好的一个库
function App() {
   let address = "北京市区"
   console.log("render");
   // 非响应式变量发生改变后不会让页面重新render，只是他自己变l，响应式变量会引起页面render
   let name = "zhangsan" // 普通生名的变量不是响应式的，不能称之为响应式变量，更不能称之为状态，他就是一个普通变量，他的变量不会让组件重现渲染
   let [arr,setArr] = useState([])
   let [age,setAge] = useState(20)
   let [flag,setFlag] = useState(true)
   let [val,setVal] = useState("")
   let [val1,setVal1] = useState("")
   let [num,setNum] = useState(0)
   useEffect(()=>{ // 模拟生命周期的，当第二个参数为一个空数组的时候，模拟的是componentDdimounted，模拟的是vue的mounted
    axios.get("/api/list").then(res=>{
        setArr(res.data)
    })
   },[])
   let fn = ()=>{
      console.log(val,val1);
      name = "lisi"
      setAge(21)
      console.log(name,age);
   }
   let changeVal = (e)=>{
      setVal(e.target.value)
   }
   let changeVal1 =(e)=>{
       setVal1(e.target.value)
   }
   function render () { // 多条件渲染
       if (num === 0) {
           return <div>我是0</div>
       } else if (num === 1) {
           return <div>2222</div>
       } else {
           return <div>33333</div>
       }
   }
   let changeNum = ()=>{
     // address = "shanxisheng"
       setNum((num)=>num+1) // 异步的，没有办法在此函数拿到响应式状态定义的最新值
      
   }
   useEffect(()=>{  // 要拿谁的最新值就用useEfect监听谁，useEffet可以拿到监听的最新值
       console.log(num);
   },[num])
  return (
    <div>
        我的名字是{name},今年{age}岁
        {/* 受控和非受控是中相对概念，一般情况下我们采用受控组件来获取输入框里的值 */}
        {/* 在react中获取输入框里的值有两种方式，一种叫做受控组件，一种叫做非受控组件 */}
        {/* 受控是说受某个东西的控制，非受控是说她不收某个东西控制 */}
        <input type="text" value={val} onChange={changeVal}/>

        <button onClick={fn}>点击我获取输入框的值</button>
        {
            render()
        }
        <hr />
        {/* 下一行这种组件叫做非受控组件，value属性不受某种东西的控制，*/}
        <input type="text" defaultValue={val1} onChange={changeVal1}/>
        {/* {
            flag ?   <Myclass></Myclass> : ""
        } 
      
        {/* {
            arr && arr.length ?  <Header arr={arr}></Header> :""
        }
        {/* {
            arr && arr.length ? <Content  arr={arr}></Content>:""
        } */}
{/*         
        {
            flag && arr.length? <Content arr={arr}></Content>:""
        } */} 
        {/* 定义的普通变量发生改变后，对自己不会渲染，组组件也不会监听到他的改变 */}
       <Appson name={name} age={age}></Appson>
       <hr />
       <h1>{num}</h1>
       <button onClick={changeNum}>修改num</button>
    </div>
  )
}

export default App